<template>
  <div class="page-container">
    <h1 class="welcome-text">欢迎你登录本系统：{{username}}</h1>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import axios from "axios"

const phone = ref('')
const username = ref('')
const adr_input = ref('')
const info_input = ref('')

onBeforeMount(() => {
  axios.get("http://localhost:8090/getuserinfo").then((res) => {
    console.log(res)
    username.value = res.data
  })
})
</script>

<style>
/* 移除scoped属性，使样式全局生效，方便统一管理页面整体样式，若你希望保持组件样式隔离，也可保留scoped并对相关选择器进行调整 */
body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  color: #333;
  background-color: #f4f4f4;
  background-image: url('@/assets/kity1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw; /* 设置宽度为视口宽度 */
  overflow-x: hidden; /* 禁止出现横向滚动条，页面内容超出部分将被隐藏 */
}

.page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.welcome-text {
  font-size: 48px;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -200%);
  border-radius: 20px; /* 较大的圆角半径，使边框更圆润，可按需调整 */
  border: 3px solid transparent; /* 先设置透明边框，方便后面添加渐变背景作为边框效果 */
  background: linear-gradient(to right, #ffe6f2, #ffc2d9) border-box; /* 将渐变颜色修改为浅粉色系，从左到右由浅到深的粉色渐变 */
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 10px; /* 通过内边距让文字与边框有一定间隔，看起来更美观 */
}

.avatar-uploader.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader.el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader.el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>